<template>
  <div class="gmat-container">
    <!-- 我的作业部分 -->
    <HomeworkIndex />

    <!-- 考试练习部分 -->
    <NuxtLayout name="shadow">
      <template #header-left>
        <h1 class="shadow-title column a-l_c">考试练习</h1>
        <span class="shadow-update-time">随心所欲配置您的个性化刷题方案</span>
      </template>

      <div class="homeWork-box-list-gmat">
        <div class="practice-content">
          <!-- 左侧导航 -->
          <div class="left-nav" style="display: flex">
            <div>
              <div
                class="nav-section"
                v-for="(item, index) in MenuStore.leftMenu"
                :key="index"
              >
                <h3>{{ item.label }}</h3>
                <div class="nav-items">
                  <div
                    :class="{
                      active: currentIndex === item.id && selectCurrentTag === v,
                      'nav-item': true,
                    }"
                    @click="handleOpen(item, v, i)"
                    v-for="(v, i) in item.children"
                    :key="i"
                  >
                    {{ v.label }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- <el-divider direction="vertical" style="height:47vh"/> -->

          <!-- 右侧内容 -->
          <div class="right-content">
            <div class="practice-types">
              <button
                v-for="(type, index) in selectCurrentTag?.children"
                :class="[
                  'default-button',
                  selectedExamType.index == index ? 'active' : '',
                ]"
                :key="index"
                @click="handleCurrentClick(type, index)"
              >
                {{ type.name }}
              </button>
            </div>

            <div class="practice-desc">
              我们将为您整体好试卷，您只需点击开始答题即可进入刷题页面啦～祝愿每位小伙伴都能顺利上岸我们将为您整体好试卷，您只需点击开始答题即可进入刷题...
            </div>

            <LoadingNodata :loading="treeDataLoading" :data="treeDataList">
              <div class="practice-settings">
                <div v-if="treeDataList && treeDataList.length > 0">
                  <div
                    v-for="(treeData, index) in treeDataList"
                    :key="index"
                    class="tree-section"
                  >
                    <TreeOption
                      :item="treeData"
                      :selected-path="selectedPaths[treeData.id] || []"
                      @select="(data) => handleTreeSelect(treeData.id, data)"
                    />
                  </div>
                </div>
                <div v-else style="width: 100%; height: 48px"></div>
              </div>
            </LoadingNodata>

            <!-- <div
              class="selected-values"
              style="margin-top: 10px; font-size: 14px; color: #666"
            >
              <div v-if="selectedRecords.category">
                科目: {{ selectedRecords.category.text }}
              </div>
              <div v-if="selectedRecords.time">时长: {{ selectedRecords.time.text }}</div>
              <div v-if="selectedRecords.count">
                题量: {{ selectedRecords.count.text }}
              </div>
            </div> -->

            <div style="display: flex; justify-content: flex-end">
              <!-- handleCreateExam -->
              <button class="start-btn" @click="handleExam">开始答题</button>
            </div>
          </div>
        </div>
        <div class="progressContainer">
          <ClientOnly fallback-tag="div" fallback="加载数据中...">
            <ProgressCard></ProgressCard>
          </ClientOnly>

          <!-- <el-divider style="margin:0px" /> -->
        </div>
      </div>
      <div class="shadow-container-box-out">
        <!-- 头部区域 -->
        <div class="shadow-header">
          <div class="shadow-header-left">
            <h1 class="shadow-title column a-l_c">我的记录</h1>
            <div class="shadow-update-time-wrapper">
              <span
                v-for="period in recordTabs"
                :key="period.id"
                class="shadow-update-time"
                :class="{ active: selectedTab === period.id }"
                @click="selectedTab = period.id"
              >
                {{ period.name }}
              </span>
            </div>
          </div>
        </div>

        <!-- 内容插槽 -->
        <LoadingNodata class="record-loading" :loading="recordLoading" :data="myRecord">
          <div class="record-list">
            <div v-for="(item, index) in myRecord" :key="index">
              <div class="record-item">
                <div class="record-left">
                  <div class="record-info">
                    <div class="record-title" v-if="!justQuestion">{{ item.name }}</div>
                    <div
                      class="record-title"
                      v-else
                      v-html="mathHTMLToShow(item.title)"
                    ></div>
                  </div>
                  <div class="record-stats">
                    <span v-if="!justQuestion"
                      >题量：{{ item.answer_num }}/{{ item.total_num }}</span
                    >
                    <span>平均用时：{{ item.timeText }}</span>
                    <span v-if="!justQuestion"
                      >正确率：{{
                        (item.right_num / item.total_num).toFixed(2) * 100 + "%"
                      }}
                    </span>
                  </div>
                </div>
                <div class="record-actions">
                  <button class="view-btn" v-if="item.is_submit > 0">查看完整数据</button>
                  <button
                    class="continue-btn"
                    v-if="item.is_submit == 0"
                    @click="handelContinueExam(item)"
                  >
                    继续做题
                  </button>
                </div>
              </div>
              <el-divider style="margin: 0px" />
            </div>
          </div>
        </LoadingNodata>
        <Pagination
          :currentPage="recordPage.currentPage"
          :pageSize="recordPage.pageSize"
          :total="recordPage.total"
          @size-change="handelSizeChange"
          @current-change="handelCurrentChange"
        ></Pagination>
      </div>
    </NuxtLayout>

    <!-- 我的记录 -->

    <!-- 试用信息弹窗 -->
    <CommonModal
      :modelValue="showTrialModal"
      :title="`云帆美研${examStore.examInfo.type1 == 2 ? '还原真题' : '线上模考'}须知`"
      :type="examStore.examInfo.type1 == 2 ? 2 : 1"
      :showTrialInfo="true"
      :trialCount="0"
      :fullExamCount="2"
      :showActionButtons="true"
      @trial="handleTrial"
      @purchase="handlePurchase"
      @close="handleCloseModal"
    />
  </div>
</template>

<script setup>
import LoadingNodata from "@/components/LoadingNodata";
import HomeworkIndex from "./homeworkIndex.vue";
import CommonModal from "@/components/commModel.vue";
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMenuStore } from "@/stores/menu.js";
import { useTimer } from "@/stores/timer.js";
import { useExam } from "@/stores/exam.js";
import { useUserStore } from "~/stores/User.js";
import { formatSeconds, handlePath } from "@/utils/index";
import TreeOption from "@/components/TreeOption/index.vue";
import {
  handleCreateExam,
  getTagListTree,
  getExamRecordList,
  getQuestionRecordList,
  getQuestionDetail,
} from "@/service/exam.js";
// 练习类型数据
const examStore = useExam();
const timerStore = useTimer();
const UserStore = useUserStore();
const MenuStore = useMenuStore();
const route = useRoute();
const router = useRouter();
//设置选中分类
const selectedExamType = ref("");
// 选中的标签
const selectedTab = ref(1);
const selectedType = ref("");
// 当前树形数据
const currentTreeData = ref(null);
// 选中路径
const selectedPath = ref([]);
// 保留原有变量以兼容其他功能
const selectCurrentTag = ref();
const selectedSubject = ref({});
//每种类型限制类型
const examType = ref({});
const currentIndex = ref();
// 当前树形数据列表（支持多个根节点）
const treeDataLoading = ref(false);
const treeDataList = ref([]);
// 选中路径（每个根节点对应一个路径）
const selectedPaths = ref({});
const selectedRecords = ref({
  category: { id: null, text: "全部" },
  time: { id: "time-30", text: "30分钟" },
  count: { id: "count-10", text: "10题" },
});
// 我的记录
const justQuestion = computed(
  () =>
    selectedRecords.value.category.parentLabelId == 3 ||
    selectedRecords.value.category.parentLabelId == 5
);
const recordLoading = ref(false);
const myRecord = ref([]);
const recordPage = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 弹窗变量
const showTrialModal = ref(false);
const handleCloseModal = () => (showTrialModal.value = false);

const handleCurrentClick = async (type, index) => {
  console.log(type, "========");
  selectedExamType.value = { ...type, index };
  treeDataList.value = [];
  // 重置选择记录的分类部分
  // 重置选择记录
  selectedRecords.value = {
    category: {
      id: type.topid,
      text: "全部",
      parentLabelId: type.id,
      sourceLabelId: type.parentId,
      rootIdA: type.rootIdA,
    },
    time: { id: "time-30", text: "30分钟" },
    count: { id: "count-10", text: "10题" },
  };
  examStore.examInfo.type1 = type.rootIdA;
  examStore.examInfo.type2 = type.parentId;
  examStore.examInfo.type3 = type.id;
  getExamRecord();
  try {
    treeDataLoading.value = true;
    // 获取初始树形数据
    let res = await getTagListTree({
      pid: type.topid,
      groupid: 0,
    });
    // 设置当前树形数据
    if (res.data && res.data.length > 0) {
      // 创建树形数据列表
      treeDataList.value = [];

      // 添加分类选择节点
      const categoryNode = {
        id: "category-root",
        label: "科目",
        children: res.data.map((item) => ({
          ...item,
          sourceLabelId: type.parentId,
          parentLabelId: type.id,
          labelId: type.id,
          rootIdA: type.rootIdA,
          children: (item.children || []).map((child) => ({
            ...child,
            sourceLabelId: type.parentId,
            parentLabelId: type.id,
            rootIdA: type.rootIdA,
            children: [],
          })),
        })),
      };
      // 只有当接口返回有数据时才添加分类节点
      if (res.data && res.data.length > 0) {
        treeDataList.value.push(categoryNode);
      }
      //限制参数
      if (type.isItTimeLimited) {
        const timeNode = {
          id: "time-root",
          label: "时长",
          notAll: true,
          children: [
            {
              id: "time-30",
              label: "30分钟",
              name: "30分钟",
              children: [],
              isLocalData: true,
            },
            {
              id: "time-60",
              label: "60分钟",
              name: "60分钟",
              children: [],
              isLocalData: true,
            },
            {
              id: "time-90",
              label: "90分钟",
              name: "90分钟",
              children: [],
              isLocalData: true,
            },
          ],
        };
        const questionCountNode = {
          id: "count-root",
          label: "题量",
          notAll: true,
          children: [
            {
              id: "count-10",
              label: "10题",
              name: "10题",
              children: [],
              isLocalData: true,
            },
            {
              id: "count-20",
              label: "20题",
              name: "20题",
              children: [],
              isLocalData: true,
            },
            {
              id: "count-30",
              label: "30题",
              name: "30题",
              children: [],
              isLocalData: true,
            },
          ],
        };
        treeDataList.value.push(questionCountNode);
        treeDataList.value.push(timeNode);
        // 设置默认值
      }
      // 添加时长选择节点

      // 初始化选择路径
      treeDataLoading.value = false;
      selectedPaths.value = {};
      treeDataList.value.forEach((node) => {
        selectedPaths.value[node.id] = [];

        if (node.id == "time-root") {
          //初始化时长默认30分钟
          selectedPaths.value[node.id] = ["time-30"];
        } else if (node.id == "count-root") {
          //初始化题量默认10题
          selectedPaths.value[node.id] = ["count-10"];
        }
      });

      // 兼容原有代码
      currentTreeData.value = categoryNode;
      selectedPath.value = [];
    } else {
      // 如果接口返回没有数据，仍然显示时长和题量选择节点
      treeDataList.value = [];

      // 添加时长选择节点

      // 初始化选择路径
      selectedPaths.value = {};
      treeDataList.value.forEach((node) => {
        selectedPaths.value[node.id] = [];
      });

      // 清空分类相关数据
      currentTreeData.value = null;
      selectedPath.value = [];
    }
  } catch (e) {
    console.error("获取数据失败", e);

    // 发生错误时，清空所有数据
    treeDataList.value = [];
    selectedPaths.value = {};
    currentTreeData.value = null;
    selectedPath.value = [];
  }
};
const handleTreeSelect = async (rootId, data) => {
  console.log(rootId, data, "handleTreeSelect-------");

  // debugger
  // 更新对应根节点的选择路径
  selectedPaths.value[rootId] = data.path;
  // 如果是分类根节点，同时更新原有的selectedPath以兼容旧代码
  if (rootId === "category-root") {
    selectedPath.value = data.path;
  }
  if (data.node) {
    const nodeText = data.node.name || data.node.label;

    if (rootId === "category-root") {
      console.log(data.node, "data-node");
      selectedRecords.value.category = {
        id: data.node.id,
        text: nodeText,
        parentLabelId: data.node.parentLabelId,
        sourceLabelId: data.node.sourceLabelId,
        rootIdA: data.node.rootIdA,
      };
    } else if (rootId === "time-root") {
      selectedRecords.value.time = { id: data.node.id, text: nodeText };
    } else if (rootId === "count-root") {
      selectedRecords.value.count = { id: data.node.id, text: nodeText };
    }
  } else if (data.path.length === 0) {
    // 用户选择了"全部"
    if (rootId === "category-root") {
      selectedRecords.value.category = {
        id: null,
        text: "全部",
        parentLabelId: data.node.parentLabelId,
        sourceLabelId: data.node.sourceLabelId,
        rootIdA: data.node.rootIdA,
      };
    } else if (rootId === "time-root") {
      selectedRecords.value.time = { id: "time-30", text: "30分钟" }; // 默认值
    } else if (rootId === "count-root") {
      selectedRecords.value.count = { id: "count-10", text: "10题" }; // 默认值
    }
  }
  // 如果是本地数据节点（题量或时长），直接返回，不需要加载子节点
  if (data.isLocalData) {
    return false;
  }
  console.log("--333");

  // 如果需要加载子节点数据
  if (data.node && data.node.children && data.node.children.length === 0) {
    try {
      // 加载子节点数据
      const { data: childData } = await getTagListTree({
        pid: data.node.id,
        groupid: 0,
      });

      // 查找并更新节点
      const updateNodeChildren = (node, id) => {
        // 直接检查当前节点
        if (node.id === id) {
          // 直接更新子节点
          node.children = childData
            .filter((i) => ![316, 426].includes(i.id) && handlePath(route.name) == 1)
            .map((item) => ({
              ...item,
              parentLabelId: data.node.parentLabelId,
              sourceLabelId: data.node.sourceLabelId,
              rootIdA: data.node.rootIdA,
              children: [],
            }));
          return true;
        }

        // 如果当前节点不匹配，则递归检查其子节点
        if (node.children && node.children.length > 0) {
          for (let i = 0; i < node.children.length; i++) {
            if (updateNodeChildren(node.children[i], id)) {
              return true;
            }
          }
        }

        return false;
      };

      console.log("加载子节点数据:", selectedPath.value, childData);

      // 更新当前树形数据中的子节点
      if (childData && childData.length > 0) {
        // 找到对应的根节点
        const rootNode = treeDataList.value.find((item) => item.id === rootId);
        if (rootNode) {
          // 从根节点开始查找并更新
          updateNodeChildren(rootNode, data.node.id);
          // 强制更新引用，确保视图更新
          treeDataList.value = [...treeDataList.value];

          // 如果是分类根节点，同时更新原有的currentTreeData以兼容旧代码
          if (rootId === "category-root") {
            currentTreeData.value = { ...rootNode };
          }
        }
      }
    } catch (error) {
      console.error("加载子节点失败:", error);
    }
  }
};

// 创建答题的title设置
const getCreateTitle = (selectedRecords) => {
  let rootObj = MenuStore.leftMenu.find(
    (root) => root.id == selectedRecords.category.rootIdA
  );
  let sourceLabel = rootObj.children.find(
    (label) => label.id == selectedRecords.category.sourceLabelId
  );
  let parentLabel = sourceLabel.children.find(
    (parent) => parent.id == selectedRecords.category.parentLabelId
  );

  return rootObj.label + "-" + sourceLabel.label + "-" + parentLabel.name;
};

// 试卷初始化赋值处理
const handelResetPaper = (res) => {
  if (
    selectedRecords.value.category.parentLabelId == 3 ||
    selectedRecords.value.category.parentLabelId == 5
  ) {
    examStore.examInfo.section = res.data.section;
  }
  examStore.examInfo.examid = res.data.examid;
  examStore.examInfo.paperid = res.data.paperid;
  timerStore.paperTime = res.data.time;
  router.push({ path: "/answerExam" });
};

// 开始答题时收集所有选择的数据
const handleExam = async () => {
  console.log(selectedRecords.value, "selectedRecords");

  // 还原真题  全真模考  开始答题要弹窗提醒购买
  if ([2, 4].includes(selectedRecords.value.category.rootIdA)) {
    showTrialModal.value = true;
    return;
  }

  const subject = handlePath(route.name);
  // 收集所有选择的数据
  const examData = {
    labelid: selectedRecords.value.category.id,
    num: selectedRecords.value.count.text,
    subject: subject,
    time: 0,
    title: getCreateTitle(selectedRecords.value),
    type1: selectedRecords.value.category.rootIdA,
    type2: selectedRecords.value.category.sourceLabelId,
    type3: selectedRecords.value.category.parentLabelId,
  };

  // 根据分类选择路径设置对应的type值
  // const categoryPath = selectedPaths.value['category-root'] || [];
  // if (categoryPath.length > 0) {
  //   examData.type1 = categoryPath[0];
  // }
  // if (categoryPath.length > 1) {
  //   examData.type2 = categoryPath[1];
  // }
  // if (categoryPath.length > 2) {
  //   examData.type3 = categoryPath[2];
  // }

  // 根据时长选择设置time值
  const timePath = selectedRecords.value["time"] || [];
  const timeId = timePath["id"];
  if (timeId === "time-30") examData.time = 30;
  else if (timeId === "time-60") examData.time = 60;
  else if (timeId === "time-90") examData.time = 90;

  // 根据题量选择设置num值
  const countPath = selectedRecords.value["count"];
  const countId = countPath["id"];
  if (countId === "count-10") examData.num = 10;
  else if (countId === "count-20") examData.num = 20;
  else if (countId === "count-30") examData.num = 30;

  // 考试信息存储
  examStore.examInfo.type1 = selectedRecords.value.category.rootIdA;
  examStore.examInfo.type2 = selectedRecords.value.category.sourceLabelId;
  examStore.examInfo.type3 = selectedRecords.value.category.parentLabelId;
  examStore.examInfo.time = examData.time;
  examStore.examInfo.num = examData.num;
  examStore.examInfo.subject = subject;
  examStore.examInfo.title = getCreateTitle(selectedRecords.value);
  examStore.examInfo.labelid = selectedRecords.value.category.id;

  // 检查是否需要时间限制弹窗
  const needTimeLimit = checkIfNeedTimeLimit();

  try {
    if (needTimeLimit) {
      // 显示时间限制弹窗
      ElMessageBox.confirm("此练习需要设置时间限制，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 用户确认后继续创建考试
          let res = await handleCreateExam(examData);

          if (res.code === "000000") {
            handelResetPaper(res);
          }

          // 处理响应...
        })
        .catch(() => {
          // 用户取消
          ElMessage({
            type: "info",
            message: "已取消创建考试",
          });
        });
    } else {
      // 直接创建考试
      let res = await handleCreateExam(examData);
      // 处理响应...
      // examStore.examInfo=res.data;
      if (res.code === "000000") {
        handelResetPaper(res);
      }
    }
  } catch (e) {
    console.error("创建考试失败:", e);
  }
};

// 继续答题
const handelContinueExam = async (exam) => {
  examStore.examInfo.examid = exam.examid;
  examStore.examInfo.paperid = exam.paperid;
  timerStore.paperTime = exam.time;
  router.push({ path: "/answerExam" });
};

const getExamRecord = async () => {
  try {
console.log(myRecord.value, recordLoading.value, )
    const subject = handlePath(route.name);
    const { currentPage, pageSize } = recordPage.value;
    let data = {
      page: currentPage,
      size: pageSize,
      subject,
      type1: Number(currentIndex.value), // 1历年真题2还原真题
      type2: Number(selectCurrentTag.value.id), // 1随机练习2进阶练习
      type3: selectedExamType.value.id,
    };
    let res;
    // 高阶练习和顺序练习 获取试题记录接口
    recordLoading.value = true;
    if (
      selectedRecords.value.category.parentLabelId == 3 ||
      selectedRecords.value.category.parentLabelId == 5
    ) {
      res = await getQuestionRecordList(data);
    } else {
      res = await getExamRecordList(data);
    }

    recordLoading.value = false;
    if (res.code === "000000") {
      const {
        data: { result, totalCount },
      } = res;
      myRecord.value = result.map((item) => ({
        ...item,
        timeText: formatSeconds(item.time),
      }));
      recordPage.value.total = totalCount;
    } else {
      myRecord.value = [];
    }

  } catch (error) {}
};

const handelSizeChange = async (size) => {
  recordPage.value.pageSize = size;
  getExamRecord();
};

const handelCurrentChange = async (page) => {
  recordPage.value.currentPage = page;
  getExamRecord();
};

// 检查是否需要时间限制弹窗
const checkIfNeedTimeLimit = () => {
  // 获取当前选中的节点信息
  const categoryPath = selectedPaths.value["category-root"] || [];
  if (categoryPath.length === 0) return false;

  // 从MenuStore中查找对应的节点
  const findNodeWithTimeLimited = () => {
    for (const category of MenuStore.leftMenu) {
      for (const subCategory of category.children) {
        for (const item of subCategory.children || []) {
          if (item.id === categoryPath[categoryPath.length - 1] && item.isItTimeLimited) {
            return true;
          }
        }
      }
    }
    return false;
  };

  return findNodeWithTimeLimited();
};
//点击弹出数据
//点击弹出数据
const handleOpen = async (parentItem, item, i) => {
  selectCurrentTag.value = item;
  // 设置当前选中的索引
  currentIndex.value = parentItem.id;
  console.log(parentItem, "parentItem");
  console.log(item, "---");
  //判断是否需要判断是否有权益
  // if ([2, 4].includes(parentItem.type)) {
  //   //需要如果没有权益则需要购买权益
  //   console.log('---购买权益')
  // } else {
  // }

  // 获取初始树形数据
  handleCurrentClick(parentItem.children[0].children[0], 0);
};

onMounted(() => {
  // console.log(handlePath(route.name))

  // 初始化数据
  examStore.getInit();

  if (MenuStore.leftMenu && MenuStore.leftMenu.length > 0) {
    currentIndex.value = MenuStore.leftMenu[0].id;
    if (MenuStore.leftMenu[0].children && MenuStore.leftMenu[0].children.length > 0) {
      selectCurrentTag.value = MenuStore.leftMenu[0].children[0];
      handleCurrentClick(MenuStore.leftMenu[0].children[0].children[0], 0);
    }
  }
});
watch(
  () => UserStore.isLoggedIn,
  () => {
    console.log("重新调用我的记录接口");
    getExamRecord();
  }
);

// 开始答题
const startExam = () => {
  console.log("开始答题", {
    type: selectedType.value,
    subject: selectedSubject.value,
    difficulty: selectedDifficulty.value,
    point: selectedPoint.value,
  });
  // TODO: 实现开始答题逻辑
};
</script>
<style scoped lang="scss">
// 通用样式
.shadow {
  &-title {
    font-size: 20px;
    color: #333333;
  }

  &-update-time {
    font-size: 14px;
    color: #999999;
    margin-left: 10px;
  }

  &-study-plan-link {
    font-size: 14px;
    color: #333333;
    text-decoration: none;
  }

  &-arrow {
    margin-left: 5px;
  }
}

// 作业列表样式
.homeWork-box-list {
  display: flex;

  .left-home {
    flex: 0 0 auto;
  }

  .right-home {
    flex: 1;
    padding: 0 20px;
  }
}

// 考试和文档部分
.section-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.exam-list,
.doc-list {
  display: flex;
  flex-direction: column;
  width: 348px;
}

.exam-list {
  gap: 9px;
}

.exam-item,
.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}

.exam-title,
.doc-title {
  flex: 1;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  width: 248px;
}

.enter-exam-btn,
.download-btn {
  padding: 8px 15px;
  color: #2b5b7b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  border: none;
  background: none;
  cursor: pointer;
}

.arrow,
.download-icon {
  font-size: 16px;
}

.doc-section {
  margin-top: 20px;
}

// 作业说明部分
.homework-instruction {
  background: #fff;
  border-radius: 8px;

  .instruction-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
  }

  .instruction-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .instruction-text {
    font-size: 14px;
    color: #666;
  }

  .submit-btn {
    align-self: flex-end;
    padding: 12px 40px;
    background: #2b5b7b;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background: #234b66;
    }
  }
}

// GMAT考试练习部分
.homeWork-box-list-gmat {
  .practice-content {
    display: flex;
  }

  // 左侧导航
  .left-nav {
    width: 184px;
    border-right: 1px solid #ddd;
    cursor: pointer;

    .nav-section {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
      }

      .nav-items {
        display: flex;
        justify-content: space-between;
      }

      .nav-item {
        font-size: 14px;
        color: #666;
        width: 82px;
        cursor: pointer;

        &.active {
          color: #2b5b7b;
        }

        &:hover {
          color: #2b5b7b;
        }
      }
    }
  }

  // 右侧内容
  .right-content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    margin-left: 20px;

    .hug-count {
      color: #2b5b7b;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .practice-types {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
    }

    .type-btn {
      padding: 8px 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &.active {
        border-color: #2b5b7b;
        color: #2b5b7b;
      }
    }

    .practice-desc {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 8px;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .practice-settings {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 30px;

      .setting-item {
        display: flex;
        align-items: flex-start;
        // border-bottom: 1px solid #ccc;
        flex-direction: column;

        &.two {
          margin-left: 60px;

          .setting-options:nth-child(1) {
            width: 38px;
            color: #333;
            font-size: 14px;
          }
        }

        &.three {
          margin-left: 60px;
          display: flex;
          gap: 10px;
          flex-wrap: wrap;

          .setting-options:nth-child(1) {
            width: 38px;
            color: #333;
            font-size: 14px;
          }
        }

        .setting-label {
          width: 60px;
          color: #333;
          font-size: 14px;
        }

        .setting-options {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }

        .option {
          border-radius: 4px;
          font-size: 14px;
          color: #666;
          cursor: pointer;

          &.active {
            color: #2b5b7b;
          }
        }
      }
    }

    .start-btn {
      width: 161px;
      padding: 12px;
      background: #2b5b7b;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background: #234b66;
      }
    }
  }
}

// 考试记录部分
.shadow-update-time-wrapper {
  display: inline-flex;
  margin-left: 10px;

  .shadow-update-time {
    font-size: 14px;
    color: #999999;
    padding: 4px 10px;
    cursor: pointer;
    position: relative;
    border: 1px solid #999999;
    border-radius: 4px;

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 12px;
      background-color: #dddddd;
    }

    &:hover {
      color: #2b5b7b;
      border: 1px solid #126983;
    }

    &.active {
      color: #2b5b7b;
      font-weight: 500;
      border: 1px solid #126983;
    }
  }
}

.record-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  .tab-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #666;

    &.active {
      border-color: #2b5b7b;
      color: #2b5b7b;
    }
  }
}

.record-loading {
  :deep() {
    .no-data-container {
      height: 735px;
    }
  }
}

.record-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.record-item {
  background: #fff;
  border-radius: 8px;
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // .record-left {}

  .record-info {
    display: flex;
    align-items: center;

    .record-date {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }

    .record-title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 600px;
      display: block;

      :deep() {
        p {
          display: inline;
          white-space: nowrap;
        }
      }
    }

    // .record-title >>> * {
    //   display: inline;
    //   white-space: nowrap;
    // }
  }

  .record-stats {
    display: flex;
    gap: 20px;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
  }

  .record-actions {
    display: flex;
    gap: 10px;

    button {
      padding: 8px 15px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
    }

    .view-btn {
      border: 1px solid #ddd;
      background: #fff;
      color: #666;
    }

    .continue-btn {
      background: #2b5b7b;
      border: none;
      color: white;

      &:hover {
        background: #234b66;
      }
    }
  }
}

.progressContainer {
  margin-top: 20px;

  :deep(.progress-card) {
    &:nth-child(2) {
      margin-top: 0px !important;
    }
  }
}

.shadow-container-box-out {
  background: #fff;
  // border-radius: 8px;
  padding: 46px 0px 16px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  // max-width: 1200px;
  // margin: 20px auto ;
  position: relative;

  // &::before {
  //   content: "";
  //   width: 57px;
  //   height: 57px;
  //   background: url("/static/Vector2.png") no-repeat center/100%;
  //   background-size: contain;
  //   position: absolute;
  //   left: -24px;
  //   top: 0;
  // }

  .shadow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
  }

  .shadow-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .shadow-header-right {
    display: flex;
    align-items: center;
  }

  .shadow-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }

  .shadow-update-time {
    color: #999;
    font-size: 14px;
    margin-left: 10px;
  }

  .shadow-study-plan-link {
    display: flex;
    align-items: center;
    color: #666;
    text-decoration: none;
    font-size: 14px;

    .shadow-arrow {
      margin-left: 4px;
      font-size: 16px;
    }

    &:hover {
      color: #409eff;

      .shadow-arrow {
        color: #409eff;
      }
    }
  }
}

.default-button {
  width: 104px;
  height: 42px;
  text-align: center;
  cursor: pointer;

  border-radius: 8px;
  background-color: #fff;
  // border-width: 1px;
  border: 1px solid #ccc;

  &.active {
    border: 1px solid #126983;
    color: #126983;
  }
}
</style>
